<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>管理员</title>
    <link rel="stylesheet" href="/css/element-plus.css" />
    <script src="/js/vue3.js"></script>
    <script src="/js/axios.js"></script>
    <script src="/js/element-plus.js"></script>
    <script src="/js/common.js"></script>
    <style>
      
    </style>
  </head>
  <body>
    <div id="app">
        <el-row :gutter="20" style="padding:10px;height:60px;border-bottom:solid 1px #ccc;margin-bottom:10px;">
            <el-col :span="20" style="font-size:25px;">在线签到系统-管理员端</el-col>
            <el-col :span="4"><el-button type="primary" style="float:right;" @click="logout">退出</el-button></el-col>
        </el-row>
        <el-tabs tab-position="left" class="demo-tabs" >
            <el-tab-pane label="用户管理">
                <el-space>
                    <el-space>
                        <el-input v-model="userQueryData.realname" clearable="true" placeholder="请输入姓名"/>
                    </el-space>
                    <el-space>
                        <el-select v-model="userQueryData.role" clearable="true"  placeholder="用户类型" style="width:120px;">
                            <el-option key="1" value="1" label="管理员" ></el-option>
                            <el-option key="2" value="2" label="教师" ></el-option>
                            <el-option key="3" value="3" label="学生" ></el-option>
                        </el-select>
                    </el-space>
                    <el-space>
                        <el-button type="primary" @click="getUserList">查询</el-button>
                    </el-space>
                    <el-space>
                        <el-button type="primary" @click="addUser">添加</el-button>
                    </el-space>
                    <el-space>
                        <el-upload
                            action="/api/admin/user/import"
                            :headers="{token:access_token}"
                            :on-success="importSuccess"
                            :show-file-list="false"
                        >
                            <el-button  type="primary">批量导入</el-button>
                        </el-upload>
                    </el-space>
                </el-space>
                
                <el-table :data="userList" style="width: 100%">
                    <el-table-column label="编号" prop="id" width="90"></el-table-column>
                    <el-table-column label="账号" prop="username" ></el-table-column>
                    <el-table-column label="姓名" prop="realname" ></el-table-column>
                    <el-table-column label="角色" prop="role" >
                        <template #default="scope">
                            <el-tag type="primary" v-if="scope.row.role==1">管理员</el-tag>
                            <el-tag type="success" v-else-if="scope.row.role==2">教师</el-tag>
                            <el-tag type="info" v-else-if="scope.row.role==3">学生</el-tag>
                            <el-tag type="danger" v-else>未知</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="班级" prop="class_name" ></el-table-column>
                    <el-table-column label="状态" prop="status" >
                        <template #default="scope">
                            <el-switch 
                                v-model="scope.row.status" 
                                size="large" 
                                inline-prompt 
                                active-text="正常" 
                                inactive-text="禁用" 
                                :active-value="1"
                                :active-value="0"
                            />
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" width="180">
                        <template #default="scope">
                            <el-button type="primary" size="small" link @click="resetPwd(scope.row.id)">重置密码</el-button>
                            <el-button type="warning" size="small" link @click="editUser(scope.row)">编辑</el-button>
                            <el-button type="danger" size="small" link @click="deleteUser(scope.row.id)">删除</el-button>
                            
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination :page-size="10" layout="prev,pager,next,jumper,->,total" :total="userTotal" @current-change="changUserPage" />
            </el-tab-pane>
            <el-tab-pane label="课程管理">
                <el-space>
                    <el-space>
                        <el-input v-model="courseQueryData.course_name" clearable="true" placeholder="请输入课程名称"/>
                    </el-space>
                    <el-space>
                        <el-button type="primary" @click="getCourseList">查询</el-button>
                    </el-space>
                    <el-space>
                        <el-button type="primary" @click="courseDialogVisible=true">添加</el-button>
                    </el-space>
                </el-space>
                <el-table :data="courseList" style="width: 100%">
                    <el-table-column label="编号" prop="id" width="90"></el-table-column>
                    <el-table-column label="课程名称" prop="course_name" ></el-table-column>
                    <el-table-column label="教师" prop="teacher_name" ></el-table-column>
                    <el-table-column label="班级" prop="class_name" ></el-table-column>
                    <el-table-column label="学期" prop="term" ></el-table-column>
                    <el-table-column label="操作" width="180">
                        <template #default="scope">
                            <el-button type="warning" size="small" link @click="">编辑</el-button>
                            <el-button type="danger" size="small" link @click="">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination :page-size="10" layout="prev,pager,next,jumper,->,total" :total="courseTotal" />
            </el-tab-pane>
        </el-tabs>
        <el-dialog
            v-model="userDialogVisible"
            title="用户"
            width="500"
            :before-close="handleClose"
        >
            <el-form :model="userData" label-width="120px" style="max-width: 600px">
                <el-form-item label="账号名">
                    <el-input v-model="userData.username" placeholder="请输入账号名"/>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="userData.realname" placeholder="请输入姓名"/>
                </el-form-item>
                <el-form-item label="用户类型">
                    <el-radio-group v-model="userData.role">
                      <el-radio :value="1">管理员</el-radio>
                      <el-radio :value="2">教师</el-radio>
                      <el-radio :value="3">学生</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="年级" v-if="userData.role==3">
                    <el-select v-model="userData.grade" placeholder="年级">
                        <el-option v-for="y in years" :label="y+'级'" :value="y" />
                    </el-select>
                </el-form-item>
                <el-form-item label="班级" v-if="userData.role==3">
                    <el-select v-model="userData.class_name" placeholder="班级">
                        <el-option v-for="c in classList" :label="c" :value="c" />
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio-group v-model="userData.status">
                      <el-radio :value="1">正常</el-radio>
                      <el-radio :value="0">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
            <div class="dialog-footer">
                <el-button @click="userDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleSubmitUserForm">保存</el-button>
            </div>
            </template>
        </el-dialog>
        <el-dialog
            v-model="courseDialogVisible"
            title="课程"
            width="500"
            :before-close="handleClose"
        >
            <el-form :model="courseData" label-width="120px" style="max-width: 600px">
                <el-form-item label="课程名称">
                    <el-input v-model="courseData.course_name" />
                </el-form-item>
                <el-form-item label="任课教师">
                    <el-select v-model="courseData.teacher_id" placeholder="班级">
                        <el-option v-for="c in teacherList" :label="c.realname" :value="c.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="上课班级">
                    <el-select v-model="courseData.class_name" placeholder="班级">
                        <el-option v-for="c in classList" :label="c" :value="c" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
            <div class="dialog-footer">
                <el-button @click="courseDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="courseDialogVisible = false">保存</el-button>
            </div>
            </template>
        </el-dialog>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            userList:[],//用户数据
            userPage:1, //用户页码
            userTotal:0,//用户总数
            userDialogVisible: false, //是否显示添加|编辑对话框
            years:[],//年级列表
            access_token: localStorage.getItem("token"),
            //用户数据
            userData:{
                id:0,
                username:'',
                realname:'',
                role:'',
                status: 1,
                class_name:'',
                grade:2020
            },
            //用户查询条件
            userQueryData:{
                realname:'',
                role:''
            },
            classList:[],//班级列表
            courseList:[],//课程数据
            coursePage:1,//课程页码
            courseTotal:0,//课程总数
            courseDialogVisible: false,//是否显示添加|编辑对话框
            //课程数据
            courseData:{
                id:0,
                teacher_id:'',
                class_name:''
            },
            //课程查询条件
            courseQueryData:{
                course_name:""
            }

          }
        },
        methods:{
          addUser(){
            this.userData ={
                id:0,
                username:'',
                realname:'',
                role:'',
                status: 1,
                class_name:'',
                grade:2020
            }
            this.userDialogVisible = true;
          },
          editUser(data){
            this.userData ={
                id: data.id,
                username:data.username,
                realname:data.realname,
                role:data.role,
                status: data.status,
                class_name:data.class_name,
                grade:data.grade
            }
            this.userDialogVisible = true;
          },
          handleSubmitUserForm(){
            let self = this;
            if(this.userData.id==0){
                service.post("/admin/user/add", this.userData).then(res=>{
                    if(res.code==200){
                        ElementPlus.ElMessage.success("添加成功")
                        self.getUserList()
                        self.userDialogVisible = false;
                    }else{
                        ElementPlus.ElMessage.error(res.msg);
                    }
                })
            }else{
                service.post("/admin/user/edit", this.userData).then(res=>{
                    if(res.code==200){
                        ElementPlus.ElMessage.success("修改成功")
                        self.getUserList()
                        self.userDialogVisible = false;
                    }else{
                        ElementPlus.ElMessage.error(res.msg);
                    }
                })
            }
          },
          deleteUser(uid){
            let self = this;
            ElementPlus.ElMessageBox.confirm('你确定要删除选择的用户么？', "提示", {
                confirmButtonText:"是",
                cancelButtonText:"否"
            })
            .then(() => {
                service.post("/admin/user/del", {ids:[uid]}).then(res=>{
                    if(res.code==200){
                        ElementPlus.ElMessage.success("删除成功")
                        self.getUserList()
                    }else{
                        ElementPlus.ElMessage.error(res.msg);
                    }
                })
            })
            .catch(() => {})
          },
          resetPwd(uid){
            const data = {
                user_id:uid,
                oldpassword: "123123",
                newpassword: "123456",
                newpassword2: "123456"
            }
            service.post("/admin/user/resetpwd", data).then(res=>{
                if(res.code==200){
                    ElementPlus.ElMessage.success("密码已重置为123456")
                }else{
                    ElementPlus.ElMessage.error(res.msg);
                }
            })
          },
          getUserList(){
            let self = this;
            let url = "/admin/user/list?page="+self.userPage+"&limit=10"
            if(self.userQueryData.realname){
                url += "&realname=" + self.userQueryData.realname
            }
            if(self.userQueryData.role && self.userQueryData.role>0){
                url += "&role=" + self.userQueryData.role
            }
            service.get(url).then(res=>{
                self.userTotal = res.data.total;
                self.userList = res.data.rows;
            })
          },
          changUserPage(page){
            this.userPage = page;
            this.getUserList();
          },
          getCourseList(){
            let self = this;
            let url = "/admin/course/list?page="+self.coursePage+"&limit=10"
            if(self.courseQueryData.course_name){
                url += "&course_name=" + self.courseQueryData.course_name
            }
            service.get(url).then(res=>{
                self.courseTotal = res.data.total;
                self.courseList = res.data.rows;
            })
          },
          logout(){
            location.href="login.html"
          }
        },
        mounted(){
            let self = this;
            this.getUserList();
            this.getCourseList();

            const now = new Date()
            for(i=now.getFullYear(); i>=2020; i--){
                this.years.push(i);
            }

            service.get("/common/classList").then(res=>{
                self.classList = res.data;
            })
            service.get("/common/teacherList").then(res=>{
                self.teacherList = res.data;
            })
        }
      })
      app.use(ElementPlus).mount('#app')
    </script>

  </body>
</html>
